<template>
  <div id="header">
    <div class="left">
      <span class="iconfont">&#xe608;</span>
    </div>
    <div class="center_put">
      <span class="iconfont">&#xe609;</span>
      <input type="text" placeholder="请输入城市/景点/游玩主题">
    </div>
    <div class="right">
      北京
      <span class="iconfont">&#xe663;</span>
    </div>
  </div>
</template>

<script>
  export default{
    name:"Header"
  }
</script>

<style lang="stylus">
  #header{
    width:100%;
    height :.44rem;
    background :#00bcd4;
    display :flex;
    align-items center;
    .iconfont{
      font-size .16rem;
    }
    .left{
      font-size .2rem;
      color white;
      padding-left .1rem;
      margin-right .1rem;
    }
    .center_put{
      flex 1;
      width 100%;
      height .3rem;
      line-height .28rem;
      border-radius 5px;
      background white;
      padding-left .1rem;
      color #ccc;
      input{
        width 85%;
        color #ccc;
      }
      span{
        display inline-block;
        vertical-align middle;
        line-height .3rem;
      }
    }
    .right{
      color white;
      padding-right .1rem;
      margin-left .1rem;
    }
  }
</style>
